var piMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.productidentification');
var referenceMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.reference');
var yarnMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.yarn');
var orderMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.order');
var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
var fMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.factory');
var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
var buttonMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.accessorybutton');
var colorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.pantonecolor');

var orderProductStore;
var orderProductGrid;
var orderProductWindow;

var selectOrderProduct = function(selectOrderProductCallback){
    if (!orderProductWindow) {
        orderProductWindow = new Ext.Window({
            title: message.get('message.combo.pleaseselect'),
            layout: 'fit',
            width: 960,
            height: 610,
            closeAction: 'hide',
            plain: true,
            modal: true,
            items: [{
                id: 'pantonePanel',
                region: 'center',
                bodyStyle: {
                    background: '#ffffff',
                    padding: '7px'
                },
                html: '<div id="orderProductDiv"></div>'
            }]
        });
    }
    orderProductWindow.show();
    
    if (orderProductGrid) 
        return;
    orderProductStore = new Ext.data.Store({
        url: '../../servlet/OrderProductServlet?action=4',
                    
        reader: new Ext.data.XmlReader({
            record: 'item',
            id: 'id',
            totalRecords: 'itemTotal'
        }, [ 
        'index', 'id','date','ctOrderType','isConfirmed','confirmedDate','departureDate',
        'orderNumber',{
        	name: 'productIdentification.reference', 
        	mapping: 'reference'
        },{
        	name: 'productIdentification.ctSeasonNumber', 
        	mapping: 'ctSeasonNumber'
        },'sketch1Name','sketch2Name','customerName','customerDepartment'
        ]),
        
        remoteSort: true
    });
    
    orderProductStore.setDefaultSort('id', 'desc');
    
    var orderProductfilters = new Ext.grid.GridFilters({
		  filters:[
		    {type: 'string',  dataIndex: 'productIdentification.reference'},
			{type: 'date', dataIndex: 'date'},
			{type: 'date', dataIndex: 'departureDate'}
	]});
	
	var orderProductExpander = new Ext.grid.RowExpander({
        tpl : new Ext.XTemplate(
			'<p><img src="../../_temp/{chartName}" width="150px"/> &nbsp;&nbsp;&nbsp;&nbsp;<img src="../../_temp/{photoName}" width="150px"/></p><br/>'
        )
    });
    
    function renderSelectItem(value, p, record){
        //var selectReferenceCallback = function(id,reference, needle,ctMachineType, weight,front,back,
        //sleeves,bottomThrum,sleevesThrum,necklineThrum,frontPhotoName,backPhotoName,otherPhotoName){
        return String.format('<a href="javascript: selectOrderProductCallback(\'{0}\',\'{1}\');orderProductWindow.hide();"><img src="../../images/icons/arrow_rotate_clockwise.png" title="' + message.get('message.list.select') + '" /></a>', record.data.id, record.data.orderNumber);
    }
    // create the grid
    orderProductGrid = new Ext.grid.GridPanel({
        title: orderMessage.get('ui.order.listorder'),
        store: orderProductStore,
        stripeRows: true,
        plugins: [orderProductfilters,orderProductExpander],
        height: 560,
        columns: [orderProductExpander,{
                    header: message.get('message.list.id'),
                    width: 30,
                    dataIndex: 'index',
                    sortable: false
                }, {
                    header: piMessage.get('ui.productidentification.seasonnumber'),
                    dataIndex: 'productIdentification.ctSeasonNumber',
                    sortable: true
                }, {
                    header: message.get('message.edit.customername'),
                    dataIndex: 'customerName',
                    sortable: true
                }, {
                    header: fcMessage.get('ui.francecustomer.department'),
                    dataIndex: 'customerDepartment',
                    sortable: true
                }, {
                    header: message.get('message.edit.date')+ '(d/m/Y)',
                    dataIndex: 'date',
                    sortable: true
                }, {
                    header: orderMessage.get('ui.order.reference'),
                    dataIndex: 'orderNumber',
                    sortable: true
                }, {
                    header: piMessage.get('ui.productidentification.chart'),
                    dataIndex: 'productIdentification.reference',
                    sortable: true
                }, {
                    header: message.get('message.edit.quantity'),
                    dataIndex: 'quantity',
                    sortable: true
                }, {
                    header: orderMessage.get('ui.order.departuredata')+ "(d/m/Y)",
                    dataIndex: 'departureDate',
                    sortable: true
                }, {
		            header: message.get('message.list.select'),
		            width: 60,
		            dataIndex: 'id',
		            sortable: false,
		            renderer: renderSelectItem
		        }],
        viewConfig: {
            forceFit: true
        },
        loadMask: true,
        renderTo: 'orderProductDiv',
        bbar: new Ext.PagingToolbar({
            pageSize: 20,
            store: orderProductStore,
            displayInfo: true
        })
    });
    
	function renderSample(value, p, record){
        return String.format('<table width="20" style="background-color: #{0};"><tr><td>&nbsp;</td></tr></table>', record.data.realColor);
    }
				
    var startPage = getPrarmeterValue(window.location, 'startPage');
    var start;
    if (startPage == null || startPage == '') {
        start = 0;
    }
    else {
        start = (startPage - 1) * 20;
    }
    orderProductStore.load({
        params: {
            start: start,
            limit: 20
        }
    });
}

